<template>
	<view class="cpy_container">
		<page-nav class="custom-title" title="搜索" :leftShow="true" :forcego="true"> </page-nav>
		<view class="bodyer">
			<view class="hbody">
				<u--input :value="keyword" placeholder="请输入企业名称" prefixIcon="search" @change="shearch"  prefixIconStyle="font-size: 22px;color: #909399">
					<template slot="suffix">
						<u-icon size="16" name="close" @click="clearkey"></u-icon>
					</template>
				</u--input>

			</view>
			<view v-if="!shearching">
				<view class="header">
					<text>历史搜索</text>
					<u-icon size="28" name="trash"></u-icon>
				</view>
				<view class="hisbody">
					<text class="htag" v-for="item in hiskey" @click="tagClick0(item)">{{item}}
					</text>
				</view>
				
				<view style="height: 20rpx;" />
				<view class="header">
					<text>最近浏览</text>
					<u-icon size="28" name="trash"></u-icon>
				</view>
				<view class="hisbody2">
					<view v-for="item in hiscompany" class="bodyitem" @click="tagClick">
						<view class="left"> 
						<u-icon size="24" name="search"></u-icon>
							<text style="display:flex; align-items: center;">{{item.company}}</text>
						</view>
						<text>{{getdate(item.time)}}</text>
					</view>
				</view>
			</view>
			<view  v-if="shearching">
				<view class="hbody">
					<text style="font-size: 28rpx;">搜素到5000+结果</text>
					<view v-for="item in 20" class="cpyitem"  >
						<image src="/static/images/wb.png" class="l" mode="widthFix" style="width: 80rpx;"></image>
						<view style="font-size: 28rpx; margin-left: 20rpx;">
							<text style="font-size: 29rpx; font-weight: bold;">万科股份有限公司</text>
							<view style="margin: 10rpx 0rpx 10rpx 0rpx;">
								<text class="grgtext">存续</text>
								<text class="blgtext">小微企业</text>
								<text class="blgtext" >新三板</text>
								<text class="blgtext">上市辅导</text>
							</view>
							<view style="margin: 10rpx 0rpx 10rpx 0rpx;">
								<text class="bltext">王石</text>|
								<text class="normal">4660万人民币</text>|
								<text class="normal">成立时间</text>
							</view>
							<view style="margin: 20rpx 0rpx 10rpx 0rpx;">
								<text class="warntext" >风险扫描:</text>
								<text>3条自身风险</text>
								<text>54条关联风险</text>								
							</view>
						</view?>	
					</view>
				</view>
			</view>
			 
		</view>
		<tab-bar></tab-bar>
	</view>

</template>

<script>
	// import {getjibenxinxi} from "./menu.js";
	import {
		getjbxx
	} from "@/api/mock/menu.js"
	export default {
		data() {
			return {
				indicator: false,
				hiskey: ["万达", "丰田汽车", "京东", "华为", "能源", "投资", "优酷集团", "广州网易", "小米"],
				hiscompany: [
					{
						imgeurl:'',
						company:'万科企业股份有限公司',
						time:'2024-04-16'
					},
					{
						imgeurl:'',
						company:'重庆燃气集团股份有限公司',
						time:'2024-04-16'
					},
					{
						imgeurl:'',
						company:'奇瑞控股集团有限公司',
						time:'2024-04-16'
					},
					{
						imgeurl:'',
						company:'网课股份有限公司',
						time:'2024-04-16'
					}
				],
				bor: false,
				keyword :'',
				shearching:false,
			}
		},
		computed:{
			getdate(){				
				return (e)=>{
					return  '今日浏览过';
				} 
			}
		},
		onLoad() {	
			this.$u.vuex("tabbarIndex",2) 
			getjbxx().then(data => {
				console.log("0000000000000000", data)
				this.jbxx = data;
			})
		},
		methods: {
			tagClick0(item){
				this.keyword = item;
			},
			tagClick(){
				uni.navigateTo({
					url:'/pages/company/company?id=lkfjasdjfklsadjfl'
				})
			},
			clearkey(){
				this.keyword ="";
				if(this.keyword !== ''){
					this.shearching = true;
				}else{
					this.shearching = false;
				}
			},
			shearch(e){
				console.log(e)
				this.keyword = e;
				if(this.keyword !== ''){
					this.shearching = true;
				}else{
					this.shearching = false;
				}
				
			}
			

		}
	}
</script>

<style lang="scss" scoped>
@import './company.scss';	
	.cpy_container {		
		height: 100vh;
		.cpyitem{
			padding: 30rpx 0rpx 10rpx 0rpx; display: flex;
			 
			&:not(:last-of-type) {
				border-bottom: 1rpx solid #DDDDDD;
			}
		}
		
		.grgtext{
			color: #49AA68;
			background: #EDF7EF; 
			padding: 5rpx 5rpx;
			margin-right: 10rpx; 
		 }
		.blgtext{
			color: #3882F4;
			background: #EDF6FF; 
			padding: 5rpx 5rpx;
			margin-right: 10rpx;
		 }
		.bltext{
		 	color: #3882F4; 
			padding: 5rpx 5rpx;
			margin-right: 10rpx;
		}
		.warntext{
		 	color: #FE5A36; 
			font-weight: 600;
		 	padding: 5rpx 5rpx;
			margin-right: 10rpx;
		}
		.normal{ 
		 	padding: 10rpx 10rpx;
			
		}
		.bodyer {

			background-color: #F3F5FC;
			height: 100vh;

		}

		.hbody {
			padding: 10rpx 30rpx 10rpx 30rpx;
			background-color: #FFFFFF;
		}

		.hisbody {
			display: flex;
			padding: 10rpx 30rpx 10rpx 30rpx;
			word-break: break-all;
			word-wrap: break-word;
			white-space: pre-wrap;
			overflow-wrap: break-word;
			background-color: #FFFFFF;
			flex-wrap: wrap;

		}

		.htag {
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			font-size: 25rpx;
			padding: 10rpx 10rpx;
			background-color: #F2F2F2;
			border-radius: 10rpx;
		}

		.header {
			display: flex;
			justify-content: space-between;
			font-weight: bold;
			font-size: 32rpx;
			padding: 10rpx 30rpx 10rpx 30rpx;
			background-color: #FFFFFF;
		}

		.hisbody2 {
			background-color: #FFFFFF;

			.bodyitem {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				padding: 10rpx 30rpx 10rpx 30rpx;
				& .left{
					display: flex;
					font-weight: bold;
				}
			}

		}

	}
</style>